<template>
  <div>
    <nav-bar>
      <template v-slot:left>
        <div class="left" @click="leftClick">
          <div class="left-item"></div>
        </div>
      </template>
      <template v-slot:center>
        <div class="title">
           <div class="center" v-for="(item,index) in titles"
             :key="index" :class="{active:index==currentIndex}"
             @click="centerItemClick(index)">{{item}} 
            </div>
        </div>
       
        </template>
    </nav-bar>
  </div>
</template>
<script>
import NavBar from '@/components/common/navbar/NavBar'
export default {
  name:"DetailNavBar",
  components:{
    NavBar
  },
  data(){
    return{
      titles:["商品","参数","评论","推荐"],
      currentIndex:0,
    }
  },
  methods: {
    //导航点击
    centerItemClick:function(index){
      this.currentIndex=index;
      //发出index
      this.$emit("NavitemClick",index)
      
    },
    //左边点击返回
    leftClick:function(){
      this.$router.back();
    }
  },
}
</script>
<style scoped>
.title{
  
  display: flex;
}
.center{
  font-size: 13px;
  color:black
}
.active{
  color:var(--color-high-text);
}
.left{
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left-item{
 
  width: 10px;
  height: 10px;
  background-color: white;
  border-bottom: 1px solid black;
  border-left:1px solid black;
  transform: rotate(45deg);

  

  
}
</style>